<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header-box">
      <view class="header-content">
        <image class="header-logo" src="../../static/images/index/logo.png" mode="widthFix"></image>
        <view class="center-btn" @click="goCenter()">
          <image class="center-img" src="../../static/images/index/center.png" mode="widthFix"></image>
          个人中心
        </view>
      </view>
    </view>
    <!-- 数据统计 -->
    <view class="total-bar">
      <view class="total-bar-item" @click="showPage(1)">
        设备总数
        <view class="total-bar-item-num">{{ statisticsData.deviceCount }}</view>
      </view>
      <view class="total-bar-item" @click="showPage(2)">
        工单总数
        <view class="total-bar-item-num">{{ statisticsData.gongdanCount }}</view>
      </view>
    </view>
    <!-- 工单列表 -->
    <view class="order-box">
      <view class="order-header">
        <view class="left-title">待执行工单</view>
        <view class="right-more" @click="showMore">查看全部</view>
      </view>
      <scroll-view :scroll-y="true" :lower-threshold="200" @scrolltolower="scrolltolower" class="scroll-Y">
        <view class="order-list" v-if="orderList.length || loadingStatus == 'loading'">
          <work-order-item v-for="(item, index) in orderList" :key="item.id" :orderItem="item" @updateList="resetList"></work-order-item>
          <uni-load-more :status="loadingStatus"></uni-load-more>
        </view>
        <view v-else class="empty-box">
          <image class="empty-img" src="../../static/images/index/empty.png" mode="widthFix"></image>
          暂无待执行工单
        </view>
      </scroll-view>
    </view>
    <!-- 底部tabbar -->
    <custom-tabbar :activeIndex="0"></custom-tabbar>
  </view>
</template>

<script setup>
  import { reactive, toRefs, onMounted, onUnmounted } from 'vue'
  import { onPullDownRefresh } from '@dcloudio/uni-app'
  import { listDeviceOrderPort } from '@/service/work-order.js'
  import { getDeviceCount } from '@/service/index.js'

  const state = reactive({
    statisticsData: {
      deviceCount: 0,
      gongdanCount: 0
    },
    queryParams: {
      isDeleted: 0,
      pageNum: 1,
      pageSize: 10,
      total: 0
    },
    loadingStatus: 'more',
    orderList: []
  })
  const { statisticsData, loadingStatus, orderList } = toRefs(state)

  //下拉刷新
  onPullDownRefresh(() => {
    resetList()
  })

  onMounted(() => {
    getList()
    getStatistics()
    uni.$on('updateWorkOrder', resetList)
  })

  onUnmounted(() => {
    uni.$off('add', resetList)
  })

  //获取工单、设备统计值
  const getStatistics = () => {
    getDeviceCount().then((res) => {
      state.statisticsData = res.data
    })
  }
  
  //数据统计，跳转对应页面(设备列表、工单列表)
  const showPage = (type) => {
  	  uni.switchTab({
  	  	url:type==1?'/pages/device/list':'/pages/work-order/list'
  	  })
  }

  //重置
  const resetList = () => {
    state.queryParams = {
      isDeleted: 0,
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
    state.orderList = []
    getList()
  }

  //查看更多
  const showMore = () => {
    uni.switchTab({
      url: '/pages/work-order/list'
    })
  }

  //个人中心
  const goCenter = () => {
    uni.navigateTo({
      url: '/pages/center/index'
    })
  }

  // 滚动条触底事件
  const scrolltolower = (e) => {
    if (state.loadingStatus == 'more') {
      state.queryParams.pageNum += 1
      getList()
    }
  }

  //获取列表
  const getList = () => {
    state.loadingStatus = 'loading'
    listDeviceOrderPort(state.queryParams).then((res) => {
      res.rows.forEach((item) => {
        item.fromLocation = item.fromDeviceOrderInfo ? handleLocation(item.fromDeviceOrderInfo) : ''
        item.toLocation = item.toDeviceOrderInfo ? handleLocation(item.toDeviceOrderInfo) : ''
      })
      state.orderList = state.orderList.concat(res.rows)
      state.queryParams.total = res.total
      state.loadingStatus = res.total > state.orderList.length ? 'more' : 'noMore'
      uni.stopPullDownRefresh()
    })
  }

  //处理位置信息
  const handleLocation = (row) => {
    let location = row.locationList.map((item) => item.name)
    location.push(row.rackName)
    if (Array.isArray(row.unoIndexList) && row.unoIndexList.length) {
      if (row.unoIndexList.length > 1) {
        location.push(`${row.unoIndexList[0]}-${row.unoIndexList[row.unoIndexList.length - 1]}U`)
      } else {
        location.push(`${row.unoIndexList[0]}U`)
      }
    }
    return location.join(' / ')
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    height: 100vh;
    position: relative;
    .header-box {
      width: 100%;
      height: 235rpx;
      background: linear-gradient(227deg, #bed3fe 0%, #d2ecff 32%, #deeafe 59%, #d1ebff 100%);
      position: relative;
      .header-content {
        box-sizing: border-box;
        width: 100%;
        padding: 0 38rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        left: 0;
        top: 92rpx;
        .header-logo {
          display: block;
          width: 260rpx;
        }
        .center-btn {
          width: 127rpx;
          height: 37rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #ffffff;
          border-radius: 16rpx;
          border: 1rpx solid #c6dfff;
          font-size: 17rpx;
          color: #282d3f;
          .center-img {
            display: block;
            width: 18rpx;
            margin-right: 8rpx;
          }
        }
      }
    }
    .total-bar {
      width: 701rpx;
      height: 90rpx;
      background: linear-gradient(270deg, #eff5fe 0%, #f4fbff 28%, #f0f7ff 55%, #f5f9ff 100%);
      border-radius: 15rpx;
      border: 2rpx solid rgba(255, 255, 255, 0.6);
      position: absolute;
      left: 24rpx;
      top: 177rpx;
      display: flex;
      align-items: center;
      .total-bar-item {
        width: 50%;
        height: 65rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20rpx;
        color: #858f9d;
        &:nth-child(1) {
          border-right: 1rpx solid #d0ebff;
        }
        .total-bar-item-num {
          font-size: 45rpx;
          color: #272a2e;
          margin-left: 20rpx;
        }
      }
    }
    .order-box {
      width: 100%;
      height: calc(100% - 235rpx);
      background-color: #fff;
      .order-header {
        box-sizing: border-box;
        width: 100%;
        height: 89rpx;
        padding: 48rpx 32rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-title {
          font-size: 23rpx;
          color: #020217;
          font-weight: bold;
        }
        .right-more {
          font-size: 23rpx;
          color: #858f9d;
        }
      }
      .scroll-Y {
        height: calc(100% - 89rpx);
      }
      .order-list {
        box-sizing: border-box;
        width: 100%;
        padding: 5rpx 23rpx 190rpx;
        overflow-y: auto;
      }
      .empty-box {
        box-sizing: border-box;
        width: 100%;
        height: calc(100% - 7.27vh);
        padding-bottom: 10vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 3.125vw;
        color: #808994;
        .empty-img {
          display: block;
          width: 17.875vw;
          margin-bottom: 2.7vh;
        }
      }
    }
  }
</style>
